<template>
    <div ref="chart" style="height:38vh;width: 100%;"></div>
    </template>
    
    <script>
    import axios from 'axios';
    import * as echarts from 'echarts'
import { countdownEmits } from 'element-plus';
    
    export default {
    data() {
    return {
    chart:null,
    data: [], // 初始化 data 变量为空数组(趋势)
    videodata:[],  //初始化视频data（柱形）
    musicdata:[],  //乐曲同上
    scoredata:[],  //乐谱同上
    textdata:[]   //专栏同上

    };
    },
    mounted() {
    this.initChart(); // 初始化 Echarts 实例
    this.fetchData();
    },
    methods: {
    initChart() {
    this.chart = echarts.init(this.$refs.chart);
    },
    fetchData() {
    this.$http.get('http://localhost:8080/work/datecount') // 发起后端请求获取查询结果
    .then(response => {
      this.data = response.data; // 将返回的数据赋值给 data 变量
    //   create_date_formatted: moment(row.create_date).format('YYYY-MM-DD') // 转换日期格式
        this.renderChart();
    })
    .catch(error => {
      console.error('Error fetching data:', error);
    });
    this.$http.get('http://localhost:8080/work/vediocount') // 发起后端请求获取查询结果
    .then(response => {
      this.videodata = response.data; // 将返回的数据赋值给 data 变量
    //   create_date_formatted: moment(row.create_date).format('YYYY-MM-DD') // 转换日期格式
        this.renderChart();
    })
    .catch(error => {
      console.error('Error fetching data:', error);
    });
    this.$http.get('http://localhost:8080/work/musiccount') // 发起后端请求获取查询结果
    .then(response => {
      this.musicdata = response.data; // 将返回的数据赋值给 data 变量
    //   create_date_formatted: moment(row.create_date).format('YYYY-MM-DD') // 转换日期格式
        this.renderChart();
    })
    .catch(error => {
      console.error('Error fetching data:', error);
    });
    this.$http.get('http://localhost:8080/work/scorecount') // 发起后端请求获取查询结果
    .then(response => {
      this.scoredata = response.data; // 将返回的数据赋值给 data 变量
    //   create_date_formatted: moment(row.create_date).format('YYYY-MM-DD') // 转换日期格式
        this.renderChart();
    })
    .catch(error => {
      console.error('Error fetching data:', error);
    });
    this.$http.get('http://localhost:8080/work/textcount') // 发起后端请求获取查询结果
    .then(response => {
      this.textdata = response.data; // 将返回的数据赋值给 data 变量
    //   create_date_formatted: moment(row.create_date).format('YYYY-MM-DD') // 转换日期格式
        this.renderChart();
    })
    .catch(error => {
      console.error('Error fetching data:', error);
    });
    },
    renderChart() {
    const options = {
    // 在这里根据需求配置 Echarts 图表的选项
     title: {
     text: '作品发布日期趋势图',
    //  left: 'center'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
        type: 'cross',
        crossStyle: {
        color: '#999'
      }
    }
  },
  toolbox: {
    feature: {
      dataView: { show: true, readOnly: false },
      magicType: { show: true, type: ['line', 'bar'] },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
        legend: {
           data: ['总趋势', '视频', '乐曲','乐谱','专栏']
         },
    xAxis: {
      type: 'category',
      data: this.data.map(row => row.create_date), // 使用 this.data 进行 map 操作
      axisLabel: {
        // rotate: 45 // 调整旋转角度，可以根据需要进行调整
        type: 'shadow'

    } 
    },
    yAxis: {
      name:'count',
      type: 'value',
      min: 0,
      max: 10,
      interval: 2,
      axisLabel: {
               formatter: '{value} 个'
             }
    },
    series: [
    {
      name:'总趋势',
      type: 'line',
      tooltip: {
               valueFormatter: function (value) {
                 return value + '个';
               }
             },
      data: this.data.map(row => row.workcount) // 使用 this.data 进行 map 操作
    },
    // {
    //     name: '视频',
    //     type: 'bar',
    //     tooltip: {
    //     valueFormatter: function (vediocount) {
    //       return value + '个';
    //         }
    //     },
    //     data: this.videodata.map(row => row.vediocount)
        
    //  },
    //  {
    //     name: '乐曲',
    //     type: 'bar',
    //     tooltip: {
    //     valueFormatter: function (musiccount) {
    //       return musiccount + '个';
    //         }
    //     },
    //     data: this.musicdata.map(row => row.musiccount)
    //  },
    //  {
    //     name: '乐谱',
    //     type: 'bar',
    //     tooltip: {
    //     valueFormatter: function (scorecount) {
    //       return scorecount + '个';
    //         }
    //     },
    //     data: this.scoredata.map(row => row.scorecount)
    //  },
    //  {
    //     name: '专栏',
    //     type: 'bar',
    //     tooltip: {
    //     valueFormatter: function (textcount) {
    //       return textcount + '个';
    //         }
    //     },
    //     data: this.textdata.map(row => row.textcount)
    //  }

]
    };
    this.chart.setOption(options);
    }
    }
    };
    </script>
    
    <style>
    /* 在这里添加你的样式 */
    </style>